import 'dart:ui';

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:logger/logger.dart';

class GestureRecognizerRoute extends StatefulWidget {
  const GestureRecognizerRoute({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _GestureRecognizerRouteState();
}

class _GestureRecognizerRouteState extends State<GestureRecognizerRoute> {
  final logger = Logger(printer: LogfmtPrinter());

  double _top = 0.0; //距顶部的偏移

  double _left = 0.0; //距左边的偏移

  double _width = 200.0; //通过修改图片宽度来达到缩放效果

  String _operation = "No Gesture detected!"; //保存事件名

  bool _toggle = false;

  final TapGestureRecognizer _recognizer = TapGestureRecognizer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('手势识别'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            const SizedBox(height: 10),
            GestureDetector(
              child: Container(
                alignment: Alignment.center,
                height: 200,
                color: Colors.blue,
                child: Text(
                  _operation,
                  style: const TextStyle(color: Colors.white, fontSize: 32),
                ),
              ),
              onTap: () => updateText("点击"),
              onDoubleTap: () => updateText("双击"),
              onLongPress: () => updateText("长按"),
            ),
            const SizedBox(height: 10),
            SizedBox(
              height: 300,
              child: Container(
                alignment: Alignment.center,
                color: Colors.yellow,
                child: Stack(
                  children: [
                    Positioned(
                      top: _top,
                      left: _left,
                      child: GestureDetector(
                        child: const CircleAvatar(
                          child: Text('A'),
                        ),
                        // 手指按下时会触发此回调
                        // 当用户按下时，此属性为用户按下的位置相对于屏幕（而非父组件）原点(左上角)的偏移。
                        onPanDown: (DragDownDetails e) {
                          logger.i("用户手指按下：${e.globalPosition}");
                        },
                        // 手指滑动时会触发此回调
                        // 当用户在屏幕上滑动时，会触发多次Update事件，delta指一次Update事件的滑动的偏移量。
                        onPanUpdate: (DragUpdateDetails e) {
                          setState(() {
                            _top += e.delta.dy;
                            _left += e.delta.dx;
                          });
                        },
                        // 该属性代表用户抬起手指时的滑动速度(包含x、y两个轴的），
                        // 示例中并没有处理手指抬起时的速度，常见的效果是根据用户抬起手指时的速度做一个减速动画
                        onPanEnd: (DragEndDetails e) {
                          //打印滑动结束时在x、y轴上的速度
                          logger.i("onPanEnd: ${e.velocity}");
                        },
                      ),
                    )
                  ],
                ),
              ),
            ),
            const SizedBox(height: 10),
            SizedBox(
              height: 300,
              child: GestureDetector(
                child: Image.asset(
                  "assets/images/01e6e1f2.jpg",
                  width: _width,
                ),
                onScaleUpdate: (e) {
                  //缩放倍数在0.8到10倍之间
                  setState(() {
                    _width = 200 * e.scale.clamp(0.8, 30.0);
                  });
                },
              ),
            ),
            const SizedBox(height: 10),
            SizedBox(
              height: 300,
              child: Text.rich(
                  TextSpan(style: const TextStyle(fontSize: 22), children: [
                const TextSpan(text: "你好世界"),
                TextSpan(
                  text: "点我变颜色",
                  style: TextStyle(
                      color: _toggle ? Colors.blue : Colors.yellow,
                      fontSize: 28.0),
                  recognizer: _recognizer
                    ..onTap = () => setState(() {
                          _toggle = !_toggle;
                        }),
                ),
                const TextSpan(text: "你好世界"),
              ])),
            )
          ],
        ),
      ),
    );
  }

  void updateText(String text) => setState(() => _operation = text);

  @override
  void dispose() {
    super.dispose();
    _recognizer.dispose();
  }
}
